<template>
  <div>
    <a-card :bordered="false">
      <f-search-form ref='search' :more="true" @searchHandler="searchHandler" >
        <f-search-form-item label="单号" name="orderNo" style="width: 200px"/>
        <f-search-form-item label="开票单位" name="invoiceunitName" style="width: 250px" v-if="current=='form3'" :visible="current=='form3'" />
        <f-search-form-item label="供货方" style='width:350px'  name="supplierId" type="select" :data="api.supplier.list" valueKey="supplierId" label-key="supplierName" @change='supplierChange'/>
        <f-search-form-item label="起始日期" type="date" style='width:260px'  name="beginDate" />
        <f-search-form-item label="截止日期" type="date" style='width:260px'  name="endDate" />
      </f-search-form>
      <a-tabs @tabClick="tabClick" :defaultActiveKey="current" v-model="current">
        <a-tab-pane key="form1">
          <invoice-no ref="form1" v-if="current=='form1'"></invoice-no>
          <div slot="tab"> <a-tooltip :destroyTooltipOnHide="true" placement="top">
            <div slot="title">1.公司全额垫付<br>
              2.客户全款或者回款
            </div>
            待开票</a-tooltip></div>
        </a-tab-pane>
        <a-tab-pane tab="审批中" key="form2">
          <invoice-yes ref="form2" v-if="current=='form2'"></invoice-yes>
        </a-tab-pane>
        <a-tab-pane tab="已审批" key="form3">
          <invoice-end ref="form3" v-if="current=='form3'"></invoice-end>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>
<script>

  import api from './../js/api'
  import InvoiceNo from './tab1'
  import InvoiceYes from './tab2'
  import InvoiceEnd from './tab3'

  export default {
    name: 'Tabs',
    components: { InvoiceNo, InvoiceYes,InvoiceEnd },
    data() {
      let me = this
      return {
        api: Object.assign(api, this.api),
        //列表初始化查询参数
        queryParam: {},
        current: 'form1',
        forms: [
          'form1',
          'form2',
          'form3'
        ]
      }
    },
    created() {
    },
    methods: {
      tabClick(name) {
        this.current = name
        this.$nextTick(() => {
          if(name=='form1')
          {
            this.searchHandler(this.$refs.search.queryParam)
          }
        })
      },
      supplierChange(value){

          this.$refs.search.queryParam.supplierId=value;
          this.searchHandler(this.$refs.search.queryParam);

      },
      searchHandler(searchParams) {
        if(this.current=='form1')
        {
          this.$refs[this.current].openMultiple(searchParams)
        }
        this.$refs[this.current].searchHandler(searchParams)
      }
    }
  }
</script>
